<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
    <div class="box">
        <ul class="left"></ul>
        <div class="right"></div>
    </div>
</body>
</html>
<script>
    //当我们打开页面的时候我们首先出现第一条数据；同时左侧出现一个列表；
    //获取数据；
    function $(sel){return document.querySelector(sel)}
    function gets(sel){return document.querySelectorAll(sel)}
   function getData(url,method,data,fn){//这个方法是封装起来进行ajax数据传递的；
        let xhr=new XMLHttpRequest();
        xhr.open(method,url);
        xhr.send(data);
        xhr.onreadystatechange=function(){
            if(xhr.readyState===4&&xhr.status===200){
               fn(JSON.parse(xhr.responseText))
            }
        }
    }
    //默认数据获取；
    getData('/prolist?id=0&&title=1','GET',null,function(dat){
        //对数据进行处理
        
        console.log(dat)
        
        let {title,content}=dat

        //结合数据渲染左侧导航
        createTitle(title,$('.left'))

        //结合数据渲染right内容
        createContent(content,$('.right'))

        //点击左边导航 实现数据更改  页面更新
        gets('.left li').forEach(item=>{
            item.onclick=function(){
                let ind=this.getAttribute('index');
                console.log(ind)
                getData('/prolist?id='+ind+'&&title=0','GET',null,function(dat){
                    let {content}=dat;
                    createContent(content,$('.right'))
                })
            }
        })
  
    })
    //封装一个创建左侧列表的方法；
    function createTitle(list,parent){
        parent.innerHTML=list.map((item,index)=>{
                return `<li index="${item.id}">${item.title}</li>`
            }).join('')
    }
    //封装一个创建右侧内容的方法；
    function createContent(cont,parent){
        let {albums,imtro,burden,ingredients,steps}=cont
        parent.innerHTML=`<div>
                <img src="${albums}"/>
                <div>简介：${imtro}</div>
                <div>辅料:${burden}</div>
                <div>主料:${ingredients}</div>
                <div>过程:
                    ${steps.map(item=>{
                        return `<div><img src="${item.img}"/><span>${item.step}</span></div>`
                    }).join('')}   
                </div>
            </div>`
    }
</script>